D8: Vue.js2 -> Vue.js3

2023 iThome 鐵人賽

DAY 8

Vue.js

從0開始學習30天可以到什麼程度？系列第 8 篇

15th鐵人賽

michellel

2023-09-23 23:30:22

259 瀏覽

分享至

今天我會先將我之前寫得Vue.js2程式碼改為Vue.js3，然後邊學習它們不同的地方。

第一個不一樣的肯定是引入的資源庫，要從Vue2改為Vue3。

<script src="https://unpkg.com/vue@next"></script>

再來，有關教材提到的"vue-cli"與Vue3才有的"Composition API Style"都在後面有更詳細說明內容，教材主要也是Vue2和Vue3通用的"Options-base"風格解說內容所以我也會先從這裡開始。
Vue2建立實體是使用"new Vue()"也是我之前程式使用的方法，而Vue3改為使用"Vue.createApp()"，兩者的功能都是用來將此實體物件與對應的DOM節點來連結。
關於連結到DOM節點，在Vue2裡是使用"el"屬性來指定，也有使用"$mount"的方法但我之前並沒有用到。而在Vue3中，則改為使用"mount()"來與DOM做連結。
接下來就到了定義狀態與資料的"data"，Vue3主要的不同就是data將以function的方式，而回傳指令的"return"和程式內容並不需要有其他改變。
而將寫好的程式呈現在網頁上同樣是使用我熟悉的""，在這裡也看學到之前不知道的Vue.js的Mustache"{{}}"如果有與後端指令發生衝突的話可以使用"delimeters"來重新定義語法。想要對狀態即時進行更新也可以使用"$data"來操作。
到這裡已經可以將我之前的程式從Vue2更新到Vue3了，以下是更新完成的程式:

<!DOCTYPE html>
<html>
<head>
  <title>Update to Vue.js3</title>
</head>
<body>
    <h1>Welcome!</h1>

      <div id="favCat">
        <h1>您喜歡的貓咪品種</h1>
        <input v-model="userInput1" type="text" placeholder="你的No.1">
        <input v-model="userInput2" type="text" placeholder="你的No.2">
        <input v-model="userInput3" type="text" placeholder="你的No.3">
        <ul>
          <li v-if="userInput1">你的NO.1 - {{ userInput1 }}</li>
          <li v-else>你的NO.1 ?</li>
          <li v-if="userInput2">你的NO.2 - {{ userInput2 }}</li>
          <li v-else>你的NO.2 ?</li>
          <li v-if="userInput3">你的NO.3 - {{ userInput3 }}</li>
          <li v-else>你的NO.3 ?</li>
        </ul>
      </div>

      <div id="userImage">
        <h1>那麼可以幫我找一張你最喜歡的品種的貓咪照片嗎?</h1>
        <input v-model="userImageUrl" type="text" placeholder="圖片網址">
        <img v-if="userImageUrl" v-bind:src="userImageUrl" alt="userInputUrl">
        <p v-else>幫我找張照片吧 ! </p>
      </div>

      <!-- Vue3.0 -->
      <script src="https://unpkg.com/vue@next"></script>

      <script>
        const ranking = Vue.createApp({
            data() {
                return{
                    userInput1: '', // user第一個input
                    userInput2: '', // user第二個input
                    userInput3: '' // user第三個input
                }
            }
        }).mount('#favCat');

        const pic = Vue.createApp({
            data(){
                return{
                    userImageUrl: ''       // user輸入的圖片網址
                }
            }
        }).mount('#userImage');

      </script>
</body>

</html>

網頁呈現: